.root {
  --kbd-fz-xs: 10px;
  --kbd-fz-sm: 12px;
  --kbd-fz-md: 14px;
  --kbd-fz-lg: 16px;
  --kbd-fz-xl: 20px;
  --kbd-fz: var(--kbd-fz-sm);

  font-family: var(--mantine-font-family-monospace);
  line-height: var(--mantine-line-height);
  font-weight: 700;
  font-size: var(--kbd-fz);
  border-radius: var(--mantine-radius-sm);
  border: 1px solid;
  border-bottom-width: 3px;
  unicode-bidi: embed;
  text-align: center;
  padding: 0.12em 0.45em;

  @mixin where-light {
    border-color: var(--mantine-color-gray-3);
    color: var(--mantine-color-gray-7);
    background-color: var(--mantine-color-gray-0);
  }

  @mixin where-dark {
    border-color: var(--mantine-color-dark-4);
    color: var(--mantine-color-dark-0);
    background-color: var(--mantine-color-dark-6);
  }
}
